<template>
	<div class="container">
		<div class="title">
			退费
			<div class="close" @click="ok()"></div>
		</div>
		
		<div class="content">
			<div class="tip">
				退费办理成功
			</div>
			
			<div class="info">
				<div>学员姓名：{{student.realName}}</div>
				<div>联系人：{{student.parentName}}</div>
				<div>联系电话：{{student.phone}}</div>
			</div>
			<div class="info">
				<div>收款人：{{info.payeeName}}</div>
				<div>收款人电话：{{info.payeeTel}}</div>
				<div>退费时间：{{info.time}}</div>
			</div>
		
			<div class="title_sub">退费详情</div>
			<div class="table">
				<div class="thead">
					<div style="width: 1.8rem;">名称</div>
					<div style="width: 1.2rem;">分类</div>
					<div style="width: 1.2rem;">单价</div>
					<div style="width: 1.2rem;">购买数量</div>
					<div style="width: 1.2rem;">总价</div>
					<div style="width: 1.2rem;">实际支付</div>
					<div style="width: 1.2rem;">应退数量</div>
					<div style="width: 1.2rem;">应退费</div>
				</div>
				<div class="tbody">
					<div class="tr_div" v-for="item,index in countList">
						<div class="tr">
							<div style="width: 1.8rem;">{{item.goodsName}}</div>
							<div style="width: 1.2rem;">{{item.goodsMode}}</div>
							<div style="width: 1.2rem;">￥{{item.salesPrice}}</div>
							<div style="width: 1.2rem;">{{item.goodsNum}}</div>
							<div style="width: 1.2rem;">￥{{item.totalMoney}}</div>
							<div style="width: 1.2rem;">￥{{item.realMoney}}</div>
							<div style="width: 1.2rem;">{{item.goodsNum}}</div>
							<div style="width: 1.2rem;">￥{{item.realMoney}}</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="count">
				<div>应退总计：￥{{info.money}}</div>
				<div>
					实际退款：
					<span class="real_money">￥{{info.relMoney}}</span>
				</div>
			</div>
			<div class="print_div">
				<!--<div class="btn_print" @click="print()">打印缴费凭条</div>-->
			</div>
		</div>
		
		<div class="btn_div">
			<div class="btn_sure" @click="ok()">
				返回办理中心
			</div>
		</div>
	</div>
</template>

<script>
var vm;
export default {
	data : function() {
		return {
			student : {},
			countList : [],
			info : {},
			time : tool.DateToString(new Date(),"yyyy.MM.dd - HH:mm")
		}
	},
	methods : {
		init : function(student,countList,info){
			
			vm.student = student;
			vm.countList = countList;
			vm.info = info;
		},
		print : function() {
			
		},
		ok : function() {
			vm.$emit('ok');
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
	}
}

</script>
<style scoped src="@/style/module/radio.css"></style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table2.css"></style>
<style scoped>
	.btn_div {
		width: 2.16rem;
		padding-top: 0.1rem;
	}
	.btn_sure {
		width: 2.16rem !important;
		margin-right: 0;
	}
	.tr>div,.thead>div {
		width: 1.4rem;
	}
	.tr_two_row {
		padding-top: 0.05rem;
		line-height: 0.2rem;
	}
	
	.content {
		padding: 0 0.3rem;
	}
	.tip {
		/*outline: 1px solid red;*/
		height: 1.3rem;
		text-align: center;
		font-size: 0.24rem;
		color: #333333;
		letter-spacing: 0.02rem;
		padding-top: 0.75rem;
		margin-bottom: 0.15rem;
		border-bottom: 0.01rem solid #f3f6fc;
		background: url(../../../assets/img/clue_manage/enroll_success.png);
		background-size: 0.66rem 0.67rem;
		background-position: center top;
		background-repeat: no-repeat;
	}
	/* ----------信息栏---------- */
	.info {
		/*outline: 1px solid red;*/
		font-size: 0.16rem;
		color: #666666;
		overflow: hidden;
		padding: 0 0 0.15rem 0.1rem;
	}
	.info>div {
		float: left;
		width: 2.8rem;
	}
	.label {
		padding-right: 0.05rem;
		color: #666666;	
	}
	.value {
		width: 1.9rem;
		height: 0.3rem;
		font-size: 0.16rem;
		letter-spacing: 0.01rem;
		color: #333333;
	}
	.type {
		margin-left: 0.1rem;
		display: inline-block;
		height: 0.2rem;
		line-height: 0.2rem;
		font-size: 0.12rem;
		background-color: #3885F8;
		color: white;
		border-radius:0.05rem ;
		padding: 0 0.05rem;
		margin-right: 0.03rem;
	}
	.title_sub {
		font-size: 0.18rem;
		font-weight: bold;
		color: #333333;
		padding-top: 0.05rem;
		padding-bottom: 0.1rem;
	}
	.count {
		padding: 0.1rem 0.1rem 0.1rem 0;
		/*margin-bottom: 0.05rem;*/
		text-align: right;
		line-height: 0.3rem;
		color: #333333;
		font-size: 0.18rem;
	}
	.earnest {
		font-size: 0.16rem;
		margin-bottom: 0.08rem;
	}
	.real_money {
		font-size: 0.26rem;
		color: #fc7301;
	}
	.print_div {
		overflow: hidden;
	}
	.btn_print {
		width: 1.6rem;
		height: 0.4rem;
		float: right;
		margin-right: 0.1rem;
		font-size: 0.16rem;
		text-align: center;
		border-radius: 0.05rem;
		cursor: pointer;
		color: #666666;
		border: 0.01rem solid #C0C4CC;
		line-height: 0.38rem;
	}
	.btn_print:hover {
		background-color: rgba(56,133,248,0.1);
	}
</style>